import React, { Component } from 'react';
// import PropTypes from 'prop-types';
import { api } from '../until/api'

export default class RecordFrom extends Component {
  constructor(props) {
    super(props);
    this.state = {
      date: '',
      title: '',
      amount: ''
    }
  }

  handlerChange(e) {
    const {name, value} = e.target;
    this.setState({
      [name]: value
    })
  }

  valid() {
    return this.state.date && this.state.title && this.state.amount;
  }

  addData(e) {
    e.preventDefault()
    api.addData(this.state).then(res => {
      this.props.onNewChange(res.data)
      this.setState({
        date: "",
        title: "",
        amount: ""
      })
    }).catch(err => {
      console.log(err);
    })
  }

  render() {
    return (
      <form className="form-inline mb-2" onSubmit={this.addData.bind(this)}>
        <div className="form-groud mr-1">
          <input type="text" className="form-control" onChange={this.handlerChange.bind(this)} placeholder="date" name="date" value={this.state.date} />
        </div>
        <div className="form-groud mr-1">
          <input type="text" className="form-control" onChange={this.handlerChange.bind(this)} placeholder="title" name="title" value={this.state.title} />
        </div>
        <div className="form-groud mr-1">
          <input type="number" className="form-control" onChange={this.handlerChange.bind(this)} placeholder="amount" name="amount" value={this.state.amount} />
        </div>
        <button type="submit" className="btn btn-primary" disabled={!this.valid()}>新建</button>
        </form>
    );
  }
}

// RecordFrom.propTypes = {
//   date: PropTypes.string,
//   title: PropTypes.string,
//   amount: PropTypes.string,
// }
